<template>
  <uni-swipe-action-item class="item-swipe">
    <view class="item">
      <slot></slot>
    </view>
    <template v-slot:right>
      <view class="right-box">
        <view class="btn-box btn-share ml-20" @touchstart="onClickAction('share')">
          <view class="circular">
            <i-icon icon="iconfenxiang" size="44rpx" color="#3D3D3D"></i-icon>
          </view>
        </view>
        <view class="btn-box btn-del" style="padding-right: 45rpx;" @touchstart="onClickAction('delete')">
          <i-icon icon="iconshanchu2" size="44rpx" color="#FF4B44"></i-icon>
        </view>
      </view>
    </template>
  </uni-swipe-action-item>
</template>

<script>
import uniSwipeActionItem from '@/components/uni-swipe/uni-swipe-action-item/uni-swipe-action-item.vue'
export default {
  components: {
    uniSwipeActionItem
  },
  props: {
    marginTop: {
      type: String,
      default: '0'
    }
  },
  methods: {
    onClickAction(type) {
      setTimeout(() => {
        this.$emit('onClickAction', type)
      }, 100)
    }
  }
}
</script>

<style lang="scss" scoped>
.item-swipe{
  width: 100%;
  background-color: #fff;
  .item{
    width: 100%;
  }
  .right-box{
    height: 100%;
    display: flex;
    align-items: center;
    .btn-box{
      padding: 20rpx 25rpx;
      min-height: 80rpx;
      box-sizing: content-box;
      display: flex;
      align-items: center;
      justify-content: center;
      .circular{
        width: 80rpx;
        height: 80rpx;
        background: linear-gradient(0deg, #FBD220, #FFE23E);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
